/** @author: duanhaijiao  @date 2022/7/6--9:35 **/

/* name: "wonderful" */
<template>
    <div class="wonderful flex"  v-if="imgList.length>0">
            <div class="img-item" v-for="item in imgList" :key="item.id">
                <div class="img-item-img flex">
                    <el-image
                            style="width: 100%; height: 160px"
                            :src="$store.state.baseUrl + item.list_image"
                            :preview-src-list="urlList">
                    </el-image>
<!--                   <img :src="$store.state.baseUrl + item.list_image" :alt="item.title">-->
                </div>
                <p class="img-item-name">
                    {{item.title}}
                </p>
            </div>
    </div>
</template>

<script>
    import {home} from '@/assets/api/api.js'
    export default {
        name: "wonderful",
        props:{
            pageId:''
        },
        data() {
            return {
                urlList:[],
                imgList:[
                ]
            }
        },
        mounted() {
            console.log(this.pageId)
            this.getData()
        },
        methods: {
            getData(){
                this.$http(home.catelist,{
                    cate_id:this.pageId
                }).then((res)=>{
                    this.imgList = res.data.article;
                    this.urlList = this.imgList.map((m)=>{
                        return this.$store.state.baseUrl + m.list_image
                    })
                })
            }
        }
    };
</script>

<style lang="scss">
.wonderful{
    flex-wrap: wrap;
    padding: 20px;
   .img-item{
       width: calc((100% - 40px)/3);
       margin-right: 20px;
       margin-bottom: 20px;
       .img-item-name{
           text-align: center;
           padding: 10px 0;
           background: rgba(230, 230, 230, 1);
       }
   }
    .img-item:nth-child(3n){
        margin-right: 0;
    }
}
</style>
